import glsl from 'vite-plugin-glsl';
import vue from '@vitejs/plugin-vue';
import { defineConfig, loadEnv } from 'vite';
import vueJsx from '@vitejs/plugin-vue-jsx';
// import autoprefixer from 'autoprefixer';
// import postCssPxToRem from 'postcss-pxtorem';
// import AutoImport from "unplugin-auto-import/vite"

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    base: './',
    css: {
      preprocessorOptions: {
        less: {
          charset: false,
          additionalData: '@import "./src/assets/less/variable.less";'
        }
      }
    },
    plugins: [vue(), vueJsx(), glsl()],
    resolve: {
      alias: {
        '@': '/src'
      },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    server: {
      host: '0.0.0.0',
      proxy: {
        '/api': {
          changeOrigin: true,
          target: 'http://localhost:3000'
        }
      }
    },
    build: {
      outDir: `dist/${env.VITE_APPNAME}`,
      assetsDir: 'assets',
      sourcemap: false,
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              var result = 'vendor';
              if (id.includes('three/examples')) {
                result = 'three-tools';
              } else if (id.includes('three.module')) {
                result = 'three.module';
              } else if (id.includes('three.webgpu')) {
                result = 'three.webgpu';
              } else if (id.includes('three.core')) {
                result = 'three.core';
              } else if (id.includes('three.tsl')) {
                result = 'three.tsl';
              } else if (id.includes('echarts')) {
                result = 'echarts';
              } else if (id.includes('vue')) {
                result = 'vue';
              } else if (id.includes('element-plus')) {
                result = 'element-plus';
              } else if (id.includes('axios')) {
                result = 'axios';
              } else if (id.includes('lodash')) {
                result = 'lodash';
              }
              return result;
            } else if (id.includes('projects') && id.includes('views')) {
              return 'apps';
            } else {
              if (id.includes('src/three')) {
                return 'threeUtils';
              } else if (id.includes('src/utils')) {
                return 'Utils';
              } else if (id.includes('src/components') || id.includes('layout')) {
                return 'Components';
              }
            }
          }
        }
      },
      chunkSizeWarningLimit: 1500
    }
  };
});
